<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小汽车</title>
	<style>
	.car{width: 200px;
		height: 100px;
		background-color: pink;
		animation: car-ani 5s infinite;}
		.lun{font-size: 30px;
			text-align: center;
			line-height: 45px;
			color: white;
		animation: ani 5s infinite;
		}
		.left-lun,.right-lun{
			float: left;
			width: 50px;
			height: 50px;
			background-color: lightblue;
			border-radius: 50px;
			animation:lun-ani 6s infinite;
			 
		}
		.right-lun{margin-left:100px;}
		@keyframes car-ani{
			0%{margin-left: 0;}
			50%{margin-left: 1000px;}
			100%{margin-left: 0;}
		}
		@keyframes ani{
		0%{margin-left: 0;}
		50%{margin-left: 1000px;}
		100%{margin-left: 0;}}
		
		@keyframes lun-ani{
			0%{transform: rotate(0deg);}
			50%{transform: rotate(3600deg);}
			100%{transform: rotate(0deg);}
		}	
	</style>
</head>
<body>
	<div class="car"></div>
	<div class="lun">
		<div class="left-lun">+</div>
		<div class="right-lun">+</div>
	</div>
</body>
</html>